<template>
	<view class="good-list">
		<view class="good-li" v-for="item in list" :key="item.id" @click="go2Detail(item.id)">
				<image class="good-img" :src="item.goodImg" mode="widthFix"></image>
				<view class="item">
					<view class="title">{{item.goodName}}</view>
					<view class="price">￥{{item.goodPrice}}元</view>
					<view class="sold">已售{{item.goodSold}}件</view>
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"good-list",
		props:{
			list:{
				type:Array,
				default(){
					return []
				}
			}
		},
		methods:{
			go2Detail(id){
				uni.navigateTo({
					url:'/pagesA/detail/detail?id='+id
				})
			}
		}
	}
</script>

<style lang="scss">
	/*less和scss选择器可以父子嵌套*/
	.good-list{
		background-color: white;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		.good-li{
			width: 37%;
			background-color:white;
			display: block;
			padding: 15px;
			margin-bottom: 10px;
			margin-top: 10px;
			border-radius: 8px;
			box-shadow: 0px 0px 3px 0.2px rgba(0,0,0,0.2);
			.good-img{
				width: 200upx;
				height: 200upx;
				display: flex;
				margin: 0 auto;
			}
			.item{
				flex: 1;
				.title{
					font-size: 15px;
					line-height: 20px;
					height: 40px;
					margin-bottom: 20px;
					overflow: hidden;
				}
				.price{
					font-size: 18px;
					color: red;
				}
				.sold{
					font-size: 12px;
					color: gray;
					float: right;
				}
			}
		}
	}
</style>